<template>
    <div class="app">
        <!-- 头部 -->
        <el-header class="header">
            <!-- 左侧文字 -->
            <div class="header-left">
                <span>LOGO</span> 产品管理中心
            </div>
            <!-- 右边内容 -->
            <div class="header-right">
                <span class="welcome">欢迎您 {{user.realName}}</span>
                <span class="header-right-line">|</span>
                <el-select size="small" v-model="role" @change="changeRole">
                    <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <span class="header-right-line">|</span>
                <a href="javascript: void(0);" @click="logout">
                    <i class="el-icon-switch-button"></i>安全退出
                </a>
            </div>
        </el-header>
        <!-- 主体内容 -->
        <el-container>
            <!-- 左边导航栏 -->
            <el-aside width="240px" class="Aside">
                <el-menu :router="true" :default-active="$route.path">
                    <!--&lt;!&ndash; 首页 &ndash;&gt;
                    <el-menu-item :index="'/index'">
                      <i class="el-icon-picture"></i>
                      <span slot="title">首页</span>
                    </el-menu-item>
                    &lt;!&ndash; 合同模板 &ndash;&gt;
                    <el-submenu :index="'/none'">
                      <template slot="title">
                        <i class="el-icon-picture"></i>
                        <span>合同模板</span>
                      </template>
                      <el-menu-item-group>
                        <el-menu-item :index="'/loanProducts'">贷款产品</el-menu-item>
                      </el-menu-item-group>
                    </el-submenu>
                    &lt;!&ndash; 合同文件 &ndash;&gt;
                    <el-submenu :index="'/pending'">
                      <template slot="title">
                        <i class="el-icon-picture"></i>
                        <span>合同管理</span>
                      </template>
                      <el-menu-item-group>
                        <el-menu-item :index="'/pending'">好车贷合同</el-menu-item>
                      </el-menu-item-group>
                    </el-submenu>
                    &lt;!&ndash; 签名管理 &ndash;&gt;
                    <el-menu-item index="/signature">
                      <i class="el-icon-picture"></i>
                      <span slot="title">签名管理</span>
                    </el-menu-item>
                    &lt;!&ndash; 系统设置 &ndash;&gt;
                    <el-menu-item :index="'/none'">
                      <i class="el-icon-picture"></i>
                      <span slot="title">系统设置</span>
                    </el-menu-item>-->
                    <template v-for="item in menus">
                        <template v-if="!item.meta.hidden">
                            <el-submenu v-if="item.children && item.children.length > 0" :index="item.path" :key="item.name">
                                <template #title>
                                    <i class="el-icon-picture"></i>
                                    <span>{{item.meta.title}}</span>
                                </template>
                                <el-menu-item-group>
                                    <template v-for="childItem in item.children">
                                        <el-menu-item
                                            v-if="!childItem.meta.hidden"
                                            :key="childItem.name"
                                            :index="`${item.path}/${childItem.path}`"
                                        >
                                            {{childItem.meta.title}}
                                        </el-menu-item>
                                    </template>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-menu-item v-else :key="item.name" :index="item.path">
                                <template #title>
                                    <i class="el-icon-picture"></i>
                                    <span>{{item.meta.title}}</span>
                                </template>
                            </el-menu-item>
                        </template>
                    </template>
                </el-menu>
            </el-aside>
            <!-- 右边内容 -->
            <router-view></router-view>
        </el-container>
        <el-footer class="footer">
            <div class="footer-left">上次登录时间: 2020年6月18日 星期四 上午11:58:56</div>
            <div class="footer-right">Copy right@厦门农商银行版权所有</div>
        </el-footer>
    </div>
</template>
<script>
import {mapState} from 'vuex';
import {logout} from '@/api/user';
import {storageLocal} from '@/common/utils/storage';

export default {
    data() {
        return {
            role: '',
        };
    },
    computed: {
        ...mapState({
            menus: state => state.menus,
            user: state => state.user,
            roles: state => state.roles,
        }),
    },
    created() {
        const role = storageLocal.get('role');
        if (role) {
            this.role = role;
            return;
        }
        if (this.roles.length > 0) {
            this.role = this.roles[0].id;
        }
    },
    methods: {
        changeRole(role) {
            storageLocal.set('role', role);
            location.reload();
        },
        async logout() {
            try {
                await this.$confirm('确定要退出登录?', '退出');
                await logout();
                storageLocal.clear();
                this.$message.success('退出登录成功');
                location.href = '/login';
            } catch (e) {
                console.log(e);
            }
        },
    },
};

</script>
<style lang="less">
.app{
    height: 100%;
    min-width: 1200px;
    .header, .footer{
        background: black;
        color: white;
        display: flex;
        line-height: 55px;
        height: 55px;
    }
    .header{
        .header-left{
            flex: 1;
            span{
                font-weight: 800;
            }
        }
        .header-right{
            flex: 1;
            text-align: right;
            .header-right-line{
                margin: 0 20px;
            }
            i{
                margin-right: 10px;
            }
            .el-select{
                width: 150px;
                input{
                    background: transparent;
                    color: #fff;
                    border: 0;
                }
            }
        }
    }
    .footer{
        .footer-left{
            flex: 1;
        }
        .footer-right{
            flex: 1;
            text-align: right;
            color: gray;
        }
    }
    .el-container{
        height: calc(100% - 120px);
        .el-menu{
            height: 100%;
        }
    }
}
</style>
